<template>
  <div>
    <h1>嵌套路由与动态路由</h1>
    <router-link to="/routerHome">首页</router-link>
    <router-link to="/routerAbout">关于</router-link>
    <router-link :to= "'/routerUser/' + userId" tag="button" replace>用户</router-link>
    <!-- include 只有匹配到的组件会被缓存  -->
    <!-- exclude 任何匹配到的组件都不会被缓存  -->
    <!-- 缓存：手否执行 created mounted 生命周期钩子  -->
    <keep-alive exclude="routerUser">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  name: 'routerHome',
  data() {
    return {
      userId:'张三',
    }
  },
  methods: {

  },
  created(){
    console.log('index created');
  },
  mounted(){
    console.log('index mounted');
  },
  updated(){
    console.log('index updated');
  },
  deactivated(){
    console.log('index deactivated');
  },
  activated(){
    console.log('index activated');
  },
}
</script>
<style lang="scss" scoped>
h1,h2,h3{
  margin-bottom: 15px;
}
a{
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 15px;
}
.router-link-active{
  color:red
}
</style>
